A Scatter chart as a Bubble chart variant using the new Bubble chart class

The Scatter chart now has a dedicated Bubble chart class as part of the file.

This goes in the documents header:

<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.dynamic.js"></script>
<script src="RGraph.common.tooltips.js"></script>
<script src="RGraph.scatter.js"></script>

Put this where you want the chart to show up:

<canvas id="cvs" width="600" height="200">
    [No canvas support]
</canvas><br />
<button onclick="var scatter = RGraph.ObjectRegistry.getFirstObjectByType('scatter'); scatter.set('colorsBubbleGraduated', !scatter.get('colorsBubbleGraduated') ); RGraph.redraw();">Toggle gradients</button>

This is the code that generates the chart:

<script>
    // Create and configure the Scatter chart
    var scatter = new RGraph.Scatter({
        id: 'cvs',
        data: [
            [30,15, 'red', 'Red bubble tooltip'],
            [60,5, 'blue', 'Blue bubble tooltip'],
            [90,8, 'pink', 'Pink bubble tooltip'],
            [120,19, 'green', 'Green bubble tooltip'],
            [150,14, 'gray', 'Gray bubble tooltip'],
            [50,12, 'red', 'Red bubble tooltip'],
            [180,24, 'gray', 'Gray bubble tooltip'],
            [250,21, 'black', 'Black bubble tooltip']
        ],
        options: {
            xmax: 365,
            labels: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
            'text.size':14,
            backgroundGridVlines: false,
            backgroundGridBorder: false,
            xaxis:false,
            tooltipsHotspot: 10
        }
    }).draw()

    var bubble = new RGraph.Scatter.Bubble(
        scatter,
            0,   // Minimum
            100, // Maximum
            25,  // Max width
            [50,60,70,80,90,84,86,87] // Bubble data
        ).draw();
    
    /**
    * This custom onmousemove event listener hides the tooltip if the mouse
    * is not over a mark.
    */
    scatter.canvas.onmousemove = function (e)
    {
        var obj   = e.target.__object__;
        var shape = obj.getShape(e);

        if (!shape) {
            RGraph.hideTooltip();
            RGraph.redraw();
        }
    }
</script>